<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跑帮郎</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    {include file="public/resource"/}
    <script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
</head>
<body>
    <style>
        .description{
            padding: 10px;

        }
        .content{
            border-radius: 10px;
            background: #fff;
            min-height: 200px;
        }
        .line-div{
            background: #fff;
            height: 50px;
            line-height: 50px;
        }
    </style>
     <header class="mui-bar mui-bar-nav" id="title_bar">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">帮买</h1>
    </header>
    <div class="mui-content">
        <form id="form" target="iframe" enctype="multipart/form-data" method="post">
            <input type="hidden" name="province" id="province">
            <input type="hidden" name="city" id="city">
            <input type="hidden" name="area" id="area">
            <input type="hidden" name="type" value="shop_for_me">
            <input type="hidden" name="wxd" value="Hello">
            <div class="description">
                <div class="content">
                    <div style="text-align: center; height: 30px; padding-top: 10px">商品描述</div>
                    <textarea style="width: 100%;min-height: 150px; border: none" name="remark"></textarea>
                    <!--<div>
                        <a href="javascript:$('#image1_input').click();" id="add_image" class="add_image">+</a>
                        <img id="image1" style="width: 80px;height: 80px;background:red;display: none"/>
                        <input type="file" id="image1_input" accept="image/*" style="display: none" name="image1">
                    </div>-->
                </div>
            </div>
            <div class="line-div">
               　购买地
                <div style="float: right; margin-right: 15px;">
                    <input type="radio" name="radio" value="0" id="free" checked onclick="cut_('none')"> 随意　　
                    <input type="radio" name="radio" value="1" id="specific" onclick="cut_('')"> 特定
                </div>
            </div>
            <div style="height: 1px;float: left; width: 100%;display: none" class="select_line"></div>
            <a href="javascript:location_page('place')" style="display:none;" id="select_div">
                <div class="line-div" style="float: right; width: 100%;color: #999">
                    <div class="mui-icon mui-icon-arrowright" style="color: #ccc; float: right;margin-top:15px; margin-right: 5px; font-size: 18px"></div>
                    <div style="width: 80%;float: right; text-align: right; color: #999" id="place_div">请选择商家&nbsp;</div>
                    <input type="hidden" name="place_name" id="place_name">
                    <input type="hidden" name="place_lng" id="place_lng">
                    <input type="hidden" name="place_lat" id="place_lat">
                </div>
            </a>
            <div style="height: 1px;float: left;width: 100%;display: none" class="select_line"></div>
            <div class="line-div" id="select_a" style="float: right; width: 100%;color: #999;display: none;">
                <div style="float: left;width: 25%;">　详细地址</div>
                <input type="text" name="place_address" placeholder="请输入商家详细地址" style="float: left;width: 75%;height: 50px;border: none;">
            </div>
            <div style="height: 1px;float: left;width: 100%;"></div>
            <a href="javascript:location_page('target')">
                <!--<div style="width: 100%;float: left; line-height: 30px; color: #999"> 　收货信息</div>-->
                <div class="line-div" style="float: right; width: 100%; color: #999">
                    <div class="mui-icon mui-icon-arrowright" style="color: #ccc; float: right;margin-top:15px; margin-right: 5px; font-size: 18px"></div>
                    <div style="width: 80%;float: right; text-align: right; color: #999" id="target_div">请选择收货地址&nbsp;</div>
                    <input type="hidden" name="target_name" id="target_name">
                    <input type="hidden" name="target_lng" id="target_lng">
                    <input type="hidden" name="target_lat" id="target_lat">
                </div>
            </a>
            <div style="height: 1px;float: left;width: 100%;"></div>
            <div class="line-div" style="float: right; width: 100%;color: #999;">
                <div style="float:left;width: 25%;">　收货人</div>
                <input type="text" name="target_truename" placeholder="请输入收货人姓名" style="float: left;width: 75%;height: 50px;border: none;">
            </div>
            <div style="height: 1px;float: left;width: 100%;"></div>
            <div class="line-div" style="float: right;width: 100%;color: #999">
                <div style="float:left;width: 25%;">　收货电话</div>
                <input type="number" name="target_phone" maxlength="11" placeholder="请输入收货电话" style="float: left;width: 75%;height: 50px;border: none;">
            </div>
            <div style="height: 1px;float: left;width: 100%;"></div>
            <div class="line-div" style="float: right;width: 100%;color: #999">
                <div style="float: left;width: 25%;">　详细地址</div>
                <input type="text" name="target_address" placeholder="请输入详细地址" style="float: left;width: 75%;height: 50px;border: none;">
            </div>
            <!--<div style="height: 1px;float: left;width: 100%;"></div>
            <div class="line-div" style="float: right;width: 100%;margin-top:1px;color: #999">
                <div style="float: left;width: 25%;">　商品费用</div>
                <input type="number" name="shop_charge" id="shop_charge" oninput="sum_all()" placeholder="商品费用 不填则为线下支付" style="float: left;width: 75%;height: 50px;border: none;">
            </div>-->
            <div style="height: 1px;float: left;width: 100%;"></div>
            <div class="line-div" style="float:right;width:100%;color: #999">
                <div style="float: left;width: 25%;">　服务费</div>
                <input type="text" id="express_charge" value="0" onchange="sum_all()" name="express_charge" placeholder="0" readonly style="float: left;color:red;width: 75%;height: 50px;border: none;">
            </div>
            <div style="height: 1px;float: left;width: 100%;"></div>
            <div class="line-div" style="float: right;width: 100%;padding-top:10px;color: #999">
                <div class="mui-input-row mui-input-range">
                    <label style="width: 20%;float: left">小费</label>
                    <input type="range" name="tip" value="0" oninput="document.getElementById('range_div').innerHTML = '￥'+this.value;sum_all();" min="0" max="100" style="width: 70%;float: left;">
                    <div id="range_div" style="width: 10%; float: right;text-align: center; margin-top: -8px; color: red">￥0</div>
                </div>
            </div>
            <div style="height: 1px;float: right;width: 100%;line-height: 50px;text-align: right; color: #777">注：小费金额全部给配送员</div>
        </form>
    </div>
    <iframe style="display: none" name="iframe"></iframe>
    <div style="height: 60px;float: right;width: 100%;"></div>
    <nav class="mui-bar mui-bar-tab">
        <div style="float: left; width: 75%;line-height: 50px;font-size: 16px;border: none">　需支付：￥<span id="price">0</span></div>
        <a class="mui-btn" href="javascript:finish()" style="display: block; width: 25%; height: 50px;line-height:40px;margin-top: -7px;border: none;background: #ff7241; float: right;font-size: 16px;border-radius: 0;color: #fff">发布</a>
    </nav>
    <script>
        var width = $(window).width();
        var height = $(window).height();
        var page = null;
        var layer_iframe = null;
        var charget_check = 0;

        var loading = layer.open({
            type: 2
        });
        var listen_address = null;

        //线程监听
        function listen() {
            if(lng != null && lat != null ){
                window.clearInterval(listen_address);
                start();
            }
        }

        $(document).ready(function () {
            get_location();
            listen_address = window.setInterval('listen()',1000);
            start();
        });

        function start() {
            layer.close(loading);

            $("#province").val(province);
            $("#city").val(city);
            $("#area").val(area);
        }

        //切换购买类型
        function cut_(val) {
            $(".select_line").css('display',val);
            $("#select_div").css('display',val);
            $("#select_a").css('display',val);
            if(val == 'none'){
                $("#place_div").html('请选择商家&nbsp;');
                $("#place_phone").val('');
                $("#place_address").val('');
                $("#place_name").val('');
                $("#place_lng").val('');
                $("#place_lat").val('');
            }
        }

        /*document.getElementById('image1_input').addEventListener('change',function(){
            var val = $('#image1_input').val();
            if(val != ''){
                var src = getFileUrl('image1_input');
                $('#image1').css('display','block');
                $('#image1').attr('src',src);
                $('#add_image').css('display','none');
            }else{
                $('#image1').css('display','none');
                $('#image1').attr('src','');
                $('#add_image').css('display','');
            }
        });

        document.getElementById('image1').addEventListener('tap',function(){
            var val = $('#image1_input').val();
            if(val != ''){
                var src = getFileUrl('image1_input');
                $('#image1').css('display','block');
                $('#image1').attr('src',src);
                $('#add_image').css('display','none');
            }else{
                $('#image1').css('display','none');
                $('#image1').attr('src','');
                $('#add_image').css('display','');
            }
        });*/

        function getFileUrl(sourceId) {
            var url;
            if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
                url = document.getElementById(sourceId).value;
            } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            }else{
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            }
            return url;
        }

        //地图选点结束
        function select_end(name,location) {
            document.getElementById('iframe').src='';
            layer.close(layer_iframe);
            $("#"+page+"_div").html(name+'&nbsp;');
            var lng = location.split(',')[0];
            var lat = location.split(',')[1];
            $("#"+page+"_name").val(name);
            $("#"+page+"_lng").val(lng);
            $("#"+page+"_lat").val(lat);

            if(page == 'target' || (page == 'place' && $('#target_lat').val() != '' && $('#target_lng').val() != '')){
                var load = layer.open({type: 2});
                $.ajax(domain+user_count_charge,{
                    type:"POST",
                    data:$('#form').serialize(),
                    timeout: 10000,
                    success:function (json) {
                        layer.close(load);
                        layer.open({
                            content: json.msg,
                            skin: 'msg',
                            time: 2 //2秒后自动关闭
                        });
                        charget_check = json.data;
                        $('#express_charge').val(json.data);
                        sum_all();
                    }
                })
            }
        }

        //地图选点开始
        function location_page(val) {
            page = val;
            layer_iframe = layer.open({
                type: 1,
                content:'<iframe frameborder="0" id="iframe" width="'+width+'" height="'+(height/2)+'" src="https://m.amap.com/picker/index.html?key=baf1a971f3daf5c0d0095ef48ccb6479"></iframe>',
                anim: 'up',
                style: 'position:fixed; bottom:0; left:0; width: '+width+'px; height: '+(height/2)+'px; padding:10px 0; border:none;'
            });
            var iframe = document.getElementById('iframe').contentWindow;
            document.getElementById('iframe').onload = function(){
                iframe.postMessage('hello','https://m.amap.com/picker/index.html?key=baf1a971f3daf5c0d0095ef48ccb6479');
            };
            parent.window.addEventListener("message",function(e){
                select_end(e.data.name,e.data.location)
            }, false);
        }
        
        //发布
        function finish() {
            var token = localStorage.getItem('token');
            var openid = localStorage.getItem('openid');

            if(charget_check == '0'){
                alert('附近没有配送员处于接单状态，无法下单');
                return;
            }
            var input = $('input');
            for(var i in input){
                if(input[i].value == '' && input[i].placeholder != ''){
                    if(document.getElementById('specific').checked == true){
                        alert(input[i].placeholder);
                        return;
                    }else{
                        if(input[i].name.indexOf('place') == -1){
                            alert(input[i].placeholder);
                            return;
                        }
                    }
                }
            }
            $.ajax(domain+user_shop_for_me+'?token='+token,{
                type:"post",
                data:$('#form').serialize(),
                success:function (json) {
                    var data = json.data;
                    var order_id = data.order_id;
                    var price = data.price;
                    alert(data.appid);
                    /*WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                            "appId": data.appid,     //公众号名称，由商户传入
                            "timeStamp": data.timestamp,         //时间戳，自1970年以来的秒数
                            "nonceStr": data.noncestr, //随机串
                            "package": 'prepay_id='+data.partnerid,
                            "signType": "MD5",         //微信签名方式：
                            "paySign": data.sign, //微信签名
                        },
                        function (res) {
                            alert(JSON.stringify(res));
                            if (res.err_msg == "get_brand_wcpay_request:ok") {
                                alert("支付成功");
                            }
                        }
                    );*/
                    $.ajax(domain+'app/user/pay_next',{token:token,order_id:order_id},function (json) {
                        alert(JSON.stringify(json))
                    })
                }
            })
        }
        
        function sum_all() {
            var express_charge = $('#express_charge').val();
            var tip = $('input[type="range"]').eq(0).val();
//            var shop_charge = $('#shop_charge').val();
            var price = parseInt(express_charge)+parseInt(tip);
            $('#price').html(price);
        }
    </script>
</body>
</html>